<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.container{
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 100vw;
			height: 100vh;
			overflow: hidden;
			background-color: #f5f5f5;
		}
		.bg_pic{
			position: absolute;
			width: 100%;
			height: 100vh;
		}
		.bg_pic img{
			width: 100%;
			height: 100%;
			filter: blur(10px);
		}
		.swiper ul{
			width: 100%;
			height: 60vh;
			padding: 0px;
			overflow: hidden;
			transform: translate(0px) translateZ(0px);
		}
		.swiper ul li{
			list-style: none;
			width: 100vw;
			height: 60vh;
			float: left;
		}
		.swiper ul li img{
			display: block;
			border-radius: 10px;
			margin: 0 auto;
			width: 60%;
			height: 90%;
		}
	</style>
</head>
<body>
	<section class="container">
		<section class="bg_pic auto">
			<img src="images/1.jpg">
		</section>
		<section class="swiper">
			<ul>
				<li><img src="images/1.jpg"></li>
				<li><img src="images/2.jpg"></li>
				<li><img src="images/3.jpg"></li>
				<li><img src="images/4.jpg"></li>
			</ul>
			<div class="tab">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</section>
	</section>
	<!-- <script type="text/javascript">
		var oSlider = document.querySelector(".swiper"), //获取swiper
			oUl = oSlider.querySelector("ul"),
			aLi = oUl.querySelectorAll("li"), //获取所有li
			oBg = document.querySelector(".bg_pic img"), //背景层
			len = aLi.length; //获取li的个数
			oUl.style.width = len + "00%"; //初始化ul的宽度
			//初始化,相当于oUl.style.transform = "translateX(0px) translateZ(0px)"
			cssTransform(oUl,"translateX",0);
			cssTransform(oUl,"translateZ",0);

			/****
				触控事件
			*/
			//初始化触控对象
			var 
				startPoint = null,
				translateX = 0,
				num = 0,
				sW = oSlider.offsetWidth,
				startX = 0,//保存当前的translateX
				startY = 0;
			oSlider.addEventListener("touchstart" ,function(event) {
				event = event || window.event;//兼容火狐
				event.preventDefault();
				event.stopPropagation();
				//保存手指按下时的对象
				startPoint = event.changedTouches[0];//存储对象
				oUl.style.transition = "";//因为初次触摸结束的时候添加了transition，如果不去掉则在整个touchmove阶段都会触发transition，造成卡顿
				startX = cssTransform(oUl, "translateX");
			}, false);//开发的时候普遍填false

			oSlider.addEventListener("touchmove" ,function(event) {
				event = event || window.event;//兼容火狐
				event.preventDefault();
				event.stopPropagation();
				//保存手指按下时的对象
				var newPoint = event.changedTouches[0];//存储对象
				//计算移动量
				var diffx = newPoint.pageX - startPoint.pageX;
				//设置移动量
				translateX = startX + diffx;
				cssTransform(oUl, "translateX", translateX);
			}, false);

			//计算移动量大于浏览器宽度一半，则切换到下一张或上一张
			oSlider.addEventListener("touchend" ,function(event) {
				event = event || window.event;//兼容火狐
				event.preventDefault();
				event.stopPropagation();
				//获取停止移动的时候 元素的translate的值
				var l = cssTransform(oUl, "translateX");
				l = Math.min(0,l);//左边墙
				l = Math.max(-sW*(len-1),l);//右边墙
				num = Math.round(-l/sW);//获取到跳转到哪个li
				autoPlay();
			}, false);

			/*
				渐变效果
			*/
			function autoPlay() {
				oUl.style.transition = ".5s";
				cssTransform(oUl, "translateX", -num*sW);
				oBg.src = aLi[num].children[0].src;
				console.log(oBg);
			}

			console.log(getComputedStyle(oUl,null)["transform"]);
			//参数 obj attr val (节点 属性 值)，功能 动态改变节点的translate
			function cssTransform(obj, attr, val) {
				if (!obj.transform) obj.transform = {};//初始化一个空的对象
				if (arguments.length === 3) { //判断传进几个参数
					//如果传进3个参数
					obj.transform[attr] = val;//设置对应的属性值
					var strVal = "";
					for(var keys in obj.transform) {
						strVal += `${keys}(${obj.transform[keys]}px) `;
					}
					console.log(strVal);
					obj.style.transform =strVal; 
				} else { //如果为两个参数，返回对应的值
					val = obj.transform[attr];
					if (typeof val === "undefined") {
						val = 0;//传入错误的如translateW
					}
					return val;
				}
			}
	</script> -->
	<script type="text/javascript" src="swiper.js"></script>
</body>
</html>